/* 
1.  点击加号按钮触发点击事件
  1. 调用小程序内置选择图片api
  2. 获取图片路径 数组格式
  3. 将图片路径都存入data变量中
  4. 页面根据 图片数组循环显示
2. 点击图片 实现删除
  1. 获取被点击元素的索引
  2. 获取data中的图片数组
  3. 在数组中删除对应元素
  4. 数据存于dada中
3. 点击提交
  1.获取文本与内容
    1.data中定义一个变量， 表示输入框内容
    2. 文本域绑定一个输入事件，事件触发的时候，把输入框的值，存入到变量中
  2. 对这些内容合法性验证
  3. 验证通过， 将用户选择图片上传到专门的服务器中，回返回图片外网的链接
    1. 遍历数组，挨个上传
    3. 自己在维护图片数组，存放图片上传后的外网链接
  4. 文本和外网的图片地址 一起提交到服务器
  5. 清空图片
  6. 返回上一页
*/
Page({
  data: {
    tabs: [
      {
        id: 0,
        value: "体验问题",
        isActivated: true
      },
      {
        id: 1,
        value: "商家投诉",
        isActivated: false
      }
    ],
    // 被选中的图片数组
    chooseImg: [],
    // 文本域内容
    textValue:""
  },
  // 外网的图片路径数组
  uploadImgs: [],
  handleTabsChange(e) {
    // 获取被点击的标题索引
    const index = e.detail.index;
    // 修改原数组
    let {tabs} = this.data;
    tabs.forEach((v,i) => i===index ? v.isActivated = true : v.isActivated = false);
    this.setData({
      tabs
    })
  },
  // 点击 + 选择图片
  handleChooseImg() {
    // 调用小程序内置添加图片api
    wx.chooseImage({
      count: 9, // 选中的图片数量
      sizeType: ['original', 'compressed'], // 图片格式，原图，压缩后
      sourceType: ['album', 'camera'], // 图片来源 相册，照相机
      success: (result) => {
         this.setData({ 
           // 数组拼接
           chooseImg: [...this.data.chooseImg, ...result.tempFilePaths]
         })
      }
    });
      
  },
  // 删除图片
  handleRemoveImg(e) {
    console.log(e);
    const index = e.currentTarget.dataset.index;
    console.log(index);
    // 获取原图片数组
    let {chooseImg} = this.data
    chooseImg.splice(index,1)
    this.setData({
      chooseImg
    })
  },
  // 文本域事件
  handleTextInpute(e) {
    this.setData({
      textValue: e.detail.value
    })
  },
  // 提交按钮
  handleFormSubmit() {
    // 获取文本域内容
    const {textValue, chooseImg} = this.data
    // 合法性判断
    if(!textValue.trim()) { // 不合法
      // 不合法
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true
      });
      return;
    }
    // 准备上传图片到专门的服务器
    // 上传文件api不支持多个我呢见同时上传，遍历数组，挨个上传
    // 显示正在等待图标
    wx.showLoading({
      title: "正在上传中",
      mask: true,
    });
    // 判断有没有要直接上传的数组
    if(chooseImg.length !=0) {
      chooseImg.forEach((v,i) => {
        var upTask = wx.uploadFile({
          // 图片要上传到哪里？
          url: 'https://images.ac.cn/Home/Index/UploadAction',
          // 要上传的文件
          filePath: v,
          // 上传的文件名称 ，后台来获取文件，  file
          name: "file",
          // 上传文件顺带的信息
          formData: {},
          success: (result) => {
            console.log(result);
            // let url = JSON.parse(result.data).url;
            // this.UploadImgs.push(url)
            // 所有的图片都上传完毕触发的代码
            if(i == chooseImg.length-1) { // 最后一个图片上传完毕
              wx.hideLoading();
              console.log("提交到服务器中");
              this.setData({
                textValue: '',
                chooseImg: []
              })
              // 返回上一个页面
              wx.navigateBack({
                delta: 1
              });
            }
          }
        });
      })
    } else {
      wx.hideLoading();
      console.log("提交文本");
      wx.navigateBack({
        delta: 1
      });
        
    }  
  }
})